<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    destroy-on-close
    :visible.sync="dialogVisible"
    title="告警列表 ＞消除警报"
    :v-loading="loading"
    top="80px"
    @close="onClose"
  >
    <el-container>
      <el-main
        :style="{ 'max-height': maxHeightDialog }"
        class="container-main"
      >
        <div class="title">
          <span>填写信息</span>
        </div>
        <el-card class="card" shadow="never" style="background: #fafafa">
          <el-form
            ref="eliminateAlarmForm"
            size="small"
            :model="form"
            label-width="120px"
            label-position="right"
            :rules="rules"
          >
            <el-form-item label="消警原因" prop="misReport">
              <el-select
                v-model="form.misReport"
                placeholder="请选择消警原因"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="item in alarmReasonData"
                  :key="item.dictValue"
                  :label="item.dictText"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="消警备注" prop="eliminateReason">
              <el-input
                v-model="form.eliminateReason"
                type="textarea"
                placeholder="请输入消警备注"
                :rows="3"
              />
            </el-form-item>
            <el-form-item label="操作人员" prop="eliminateUser">
              <!-- <el-input v-model="form.eliminateUser" placeholder="请输入操作人员"></el-input> -->
              <el-select
                v-model="form.eliminateUser"
                filterable
                clearable
                placeholder="请选择操作人员"
                style="width: 100%"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.userId"
                  :label="item.username"
                  :value="item.username"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
      </el-main>
      <el-footer>
        <el-button
          type="warning"
          plain
          :loading="loading"
          @click="onClose"
          style="margin-right: 10px"
          >{{ $t('common.cancel') }}</el-button
        >
        <el-button
          type="primary"
          plain
          :loading="loading"
          @click="handleSubmit"
          >{{ $t('common.confirm') }}</el-button
        >
      </el-footer>
    </el-container>
  </el-dialog>
</template>
<script>
import dataFormMixins from '@/mixins/data-form-mixins'
import systemManageApi from '@/api/system-manage'
import warningManageApi from '@/api/warning-manage'
export default {
  mixins: [dataFormMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    alarmReasonData: {
      type: Array,
      default: () => [],
    },
    deleteIdStr: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      viewInfoList: {},
      form: {
        misReport: '', // 消警原因
        eliminateReason: '', // 消警备注
        eliminateType: 1,
        eliminateUser: '', // 操作人员
      }, // eliminateType 是否消警，只有1
      loading: false,
      deleteId: '',
      userList: [],
      rules: {
        misReport: [
          { required: true, message: '请选择消警原因', trigger: 'change' },
        ],
        eliminateUser: [
          { required: true, message: '请选择操作人员', trigger: 'change' },
        ],
      },
    }
  },
  computed: {
    // rules() {
    //   return {
    //     misReport: [
    //       { required: true, message: '请选择消警原因', trigger: 'change' },
    //     ],
    //     eliminateUser: [
    //       { required: true, message: '请选择消警原因', trigger: 'change' },
    //     ],
    //   }
    // },
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  mounted() {
    this.getUser()
  },
  methods: {
    getUser() {
      systemManageApi
        .getUserNormal({})
        .then((data) => {
          this.userList = data.data.data.rows
        })
        .catch((e) => {
          this.$message.error('获取数据失败，请联系管理员')
        })
    },
    init(row) {
      this.viewInfoList = row
    },
    reset() {
      this.loading = false
      this.$refs['eliminateAlarmForm'].resetFields()
    },
    onClose() {
      this.reset()
      this.isVisible = false
      this.$emit('close')
    },
    onSuccess() {
      this.onClose()
      this.$emit('success')
    },
    handleSubmit() {
      this.$refs['eliminateAlarmForm'].validate((err, values) => {
        if (err) {
          this.loading = true
          const params = { ...this.form } // this.$util.deepClone(this.form)
          const url = `alert/equipmentCollectAlert/batchEliminateByIds/${this.deleteIdStr}`
          warningManageApi
            .batchEliminateByIds({
              ...params,
              ids: this.deleteIdStr,
            })
            .then(() => {
              this.$message.success('消除报警成功')
              this.onSuccess()
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
    toClose() {
      this.$emit('close')
    },
  },
}
</script>
<style lang="scss" scoped>
@import '../../../../../styles/part-custom';
.user-view {
  .img-wrapper {
    text-align: center;
    margin-top: -1.5rem;
    margin-bottom: 10px;
    img {
      width: 4rem;
      border-radius: 50%;
    }
  }
  .view-item {
    margin: 7px;
    i {
      font-size: 0.97rem;
      font-weight: bold;
    }
    label {
      margin: 0 5px;
    }
  }
}
</style>
